<template>
  <el-container class="app" direction="vertical">
    <el-header class="app-head" height="60px" style="-webkit-app-region: drag">
      <el-row :gutter="20" type="flex" align="middle" justify="space-between" style="height: 100%">
        <el-col class="app-head__logo" :span="4"> 这里是logo </el-col>
        <el-col class="app-head__title" :span="10"> {{ pageTitle }} </el-col>
        <el-col class="app-head__btn" :span="4">
          <el-dropdown trigger="click">
            <el-button
              type="primary"
              circle
              style="-webkit-app-region: no-drag; margin-right: 10px"
              icon="el-icon-more"
              size="small"
            >
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>选项一</el-dropdown-item>
              <el-dropdown-item>选项二</el-dropdown-item>
              <el-dropdown-item>选项三</el-dropdown-item>
              <el-dropdown-item>选项四</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button
            @click="miniApp()"
            type="info"
            circle
            style="-webkit-app-region: no-drag"
            icon="el-icon-minus"
            size="small"
          >
          </el-button>
          <el-button
            @click="fullScreen()"
            type="warning"
            circle
            style="-webkit-app-region: no-drag"
            icon="el-icon-full-screen"
            size="small"
          >
          </el-button>
          <el-button
            @click="closeApp()"
            type="danger"
            circle
            style="-webkit-app-region: no-drag"
            icon="el-icon-switch-button"
            size="small"
          >
          </el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="app-body">
      <slot></slot>
    </el-main>
  </el-container>
</template>
<script>
  export default {
    props: {
      pageTitle: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        fullScreenFlag: false
      }
    },
    methods: {
      closeApp() {
        bridgeApi.closeApp()
      },
      fullScreen() {
        bridgeApi.fullScreen((this.fullScreenFlag = !this.fullScreenFlag))
      },
      miniApp() {
        bridgeApi.miniApp()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
    .app-head {
      user-select: none;
      background: #f5f5f5;
      &__title {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &__btn {
        text-align: right;
      }
    }
    .app-body {
      padding: 0;
    }
  }
</style>
